<template>
    <div
        class="iconzu"
        :style="{
            width: data.options.width,
            height: data.options.height,
            borderRadius: data.options.borderRadius,
            borderWidth: data.options.borderWidth+'px',
            borderStyle: data.options.borderStyle,
            borderColor: data.options.borderColor,

    }">
        <div class="iconzu-mask" :style="{background: data.options.backgroundColor,opacity: data.options.opacity}"/>
        <i
            :class="['iconfont', data.options.iconName]"
            :style="{
                'color': data.options.color,
                'font-size': data.options.fontSize,
        }"/>
    </div>
</template>
<script>
export default {
    name: 'BaseIconZu',
    props: {
        data: {
            type: Object
        }
    }
}
</script>
<style lang="scss" scoped>
    .iconzu{
        position: relative;
        overflow: hidden;
        .iconzu-mask{
            width: 100%;
            height: 100%;
        }
        .iconfont,.iconzu-mask
        {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    }
</style>
